Vue Js Validate Image Upload

Validating image uploads in a Vue.js application is crucial in ensuring the quality and consistency of the images being uploaded, and there are several checks that can be performed, such as dimension validation to confirm the dimensions meet the required size, size validation to ensure the size does not exceed the maximum allowed file size, and file type validation to check the type of image file being uploaded is a supported format such as PNG, JPG, or GIF.In this tutorial we will learn how to validate Image uploads

How to Validate Image upload in Vue Js?

The below code is a Vue.js script that creates a file input form for image upload. The script validates the image file on change and provides feedback to the user about the result of the validation process.

Here’s a step-by-step breakdown of what the code does:

The script creates a Vue instance with an element binding to the #app HTML element.
The Vue instance has two data properties: errors (an array to store validation error messages) and success (a string to store a success message).
The Vue instance has a method called validateImage which is triggered when a file is selected and the input changes.
Inside the validateImage method, the first file in the list of selected files is stored in the file variable. The allowedTypes array stores the accepted file types (JPEG, PNG, and GIF).
The code checks if a file has been selected, if not, it pushes an error message to the errors array.
The code then checks if the file type is included in the allowedTypes array, and if not, it pushes an error message to the errors array.
The code also checks if the file size is greater than 500KB, and if so, it pushes an error message to the errors array.
The code creates a new Image object and a new FileReader object to read the contents of the file.
When the file reader has finished reading the file, it sets the src of the image object to the result and starts loading the image.
Once the image has loaded, the code checks if the image’s width and height are both greater than or equal to 100, and if not, it pushes an error message to the errors array.
If there are no errors in the errors array, the success message is set to “Image validated successfully”.
The user is provided with feedback by displaying error messages in red and the success message in green.

Vue.js Image Upload with Validations: Checking Dimensions, File Size, and Type

<div id="app">
   <input type="file" ref="fileInput" @change="validateImage" />
   <p style='color:green' v-if="success">{{success}}</p>
   <p style='color:red' v-for="error in errors">{{error}}</p>
</div>
<script type="module">
        const app = new Vue({
            el: "#app",
            data() {
                return {
                    errors: [],
                    success: null
                };
            },
            methods: {
                validateImage() {
                    let file = this.$refs.fileInput.files[0];
                    let allowedTypes = ['image/jpeg', 'image/png', 'image/gif'];
                    this.errors = [];

                    if (!file) {
                        this.errors.push('Please select an image file');
                        return;
                    }

                    if (!allowedTypes.includes(file.type)) {
                        this.errors.push('Invalid file type. Only jpeg, png, and gif are allowed.');
                    }

                    if (file.size > 500000) {
                        this.errors.push('File size too large. Maximum size is 500KB.');
                    }

                    let image = new Image();
                    let reader = new FileReader();

                    reader.onload = (e) => {
                        image.src = e.target.result;

                        image.onload = () => {
                            if (image.width < 100 || image.height < 100) {
                                this.errors.push('Image resolution too low. Minimum size is 100x100.');
                            }

                            if (this.errors.length === 0) {
                                this.success = 'Image validated successfully'
                            }
                        };
                    };

                    reader.readAsDataURL(file);
                }
            }
        })
 </script>